<template>
    <a-select
            showSearch
            :placeholder="placeholder"
            style="width: 200px"
            @change="handleChange"
            :filterOption="false"
            :notFoundContent="null"
            :allowClear="true"
            v-model="selected"
            @dropdownVisibleChange="dropdownVisibleChange"
            @search="search">
        <a-select-option :value="item[valueKey]" :key="item[valueKey]" v-for="item in data">{{item[lableKey]}}
        </a-select-option>
        <a-select-option value="$#$" key="$#$" class="next-btn" v-if="loading || hasMore" :disabled="true">
            <div class="text-center loadMore" @click.stop="loadMore">
                <a-button :loading="loading" block style="border: 0px;">
                    <span style="font-size: 12px;">{{loading ? loadingText : '加载更多...'}}</span>
                </a-button>
            </div>
        </a-select-option>
        <a-select-option value="$#$" key="$#$" class="next-btn" v-if="!loading && data.length === 0" :disabled="true">
            <div class="text-center loadMore" style="font-size: 12px; padding: 5px;" @click.stop="loadMore">
                搜索不到相关记录
            </div>
        </a-select-option>
    </a-select>
</template>

<script>
    import {prefix} from '../config';
    // import loadMore from '../loadMore/load-more';
    export default {
        name: `${prefix}RemoteSelect`,
        components: {},
        props: {
            value: {
                default: undefined
            },
            params: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            dataFun: {
                type: Function,
                required: true
            },
            pageSize: {
                type: Number,
                default: 10
            },
            loadingText: {
                type: String,
                default: '加载中...'
            },
            noMatchText: {
                type: String,
                default: '无匹配数据'
            },
            isMultiple: { // 多选
                type: Boolean,
                default: false
            },
            noDataText: {
                type: String,
                default: '无数据'
            },
            lableKey: {
                type: String,
                default: 'lable'
            },
            valueKey: {
                type: String,
                default: 'value'
            },
            labeValue: String,
            placeholder: String,
            clearable: {
                type: Boolean,
                default: true
            },
            idx: {
                type:Number,
            }
        },
        data() {
            return {
                data: [],
                pagination: {
                    pageSize: this.pageSize,
                    current: 1,
                    total: 0
                },
                loading: false,
                timer: null,
                selected: this.value
            };
        },
        computed: {
            hasMore() {
                return this.pagination.total > this.data.length;
            }
        },
        mounted() {
            let params = {};
            if (this.selected) {
                params[this.valueKey] = this.selected;
            }
            this.reload(params);
        },
        watch: {
            value() {
                this.selected = this.value;
            }
        },
        methods: {
            getData(params) {
                this.loading = true;
                this.dataFun(params).then(ret => {
                    let data = ret.data;
                    const pagination = {...this.pagination};
                    pagination.total = Number(data.total);
                    pagination.current = Number(data.current);
                    setTimeout(() => {
                        this.loading = false;
                    }, 300);
                    let tempData = [...this.data, ...data.records];
                    this.data = tempData;
                    this.pagination = pagination;
                    this.$emit('afterLoad', this.data,this.idx);
                });
            },
            reload(params = {}) {
                this.data = [];
                this.getData({
                    pageSize: this.pagination.pageSize,
                    pageNum: 1,
                    ...this.params,
                    ...params
                });
            },
            loadMore() {
                this.getData({
                    pageSize: this.pagination.pageSize,
                    pageNum: this.pagination.current + 1,
                    ...this.params
                });
            },
            handleChange(value) {
                if (value === undefined) {
                    value = '';
                    this.reload();
                } else {
                    let params = {};
                    params[this.valueKey] = value;
                    //this.reload(params);
                }
                this.$emit('input', value,this.idx);
                this.$emit('change', value,this.idx);
            },
            dropdownVisibleChange(open) {
                if (open && this.data.length === 0) {
                    this.reload();
                }
            },
            search(value) {
                let params = {};
                params[this.lableKey] = value;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                this.timer = setInterval(() => {
                    this.reload(params);
                    clearInterval(this.timer);
                    this.timer = null;
                }, 500);
            },
            afterLoad() {
            }
        }
    };
</script>
<style scoped lang="scss">
    .loadMore {
        border-top: 1px solid #e8e8e8;
    }
</style>
<style lang="scss">
    .ant-select-dropdown-menu-item.next-btn {
        padding: 0px;
    }
</style>
